@color-c:#f0f3f4;
header{
  position: fixed;
  height: 64px;
  width: 100%;
  z-index: 10;
  background-color: rgb(255, 255, 255);
  box-shadow: 1px -6px 20px 0px black;
  div.container{
    position: relative;
    height: 100%;
    div.logo{
      font-size: 26px;
      font-weight: 500;
      text-indent: 1em;
      height: 100%;
      line-height: 64px;
    }
    div.findArticle{
      position: absolute;
      top: 0;
      left: 252px;
      height: 100%;
      width: 300px;
      display: flex;
      justify-content: left;
      align-items: center;
      input.findTitleipt{
        outline: none;
        height: 30px;
        font-size: 16px;
        width: 240px;
        box-sizing: border-box;
        border: 2px solid rgb(121, 117, 117);
        border-radius: 10px 0 0 10px;
        text-indent:0.5em;
      }
      div.findTitlebtn{
        text-align: center;
        height: 30px;
        line-height: 26px;
        width: 50px;
        border: 2px solid rgb(121, 117, 117);
        border-left: 0;
        border-radius: 0px 10px 10px 0px;
        box-sizing: border-box;
        transition: all 0.2s;
        cursor: pointer;
      }
      div:hover{
        user-select: none;
        background-color: rgb(218, 218, 218);
      }
    }
  }
}
#userstatus{
  position: absolute;
  right: 0px;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  p{
    .userName{
      margin:0 8px;
      color: rgb(88, 233, 136);
      font-weight: 500;
      font-size: 18px;
    }
    .islogin{
      font-size: 14px;
      cursor: pointer;
      color: rgb(121, 121, 121);
      transition: all 0.3s;
    }
    .islogin:hover{
      text-indent:unset;
      color: rgb(174, 117, 192);
    }
    .breaklogin{
      font-size: 14px;
      cursor: pointer;
      color: rgb(121, 121, 121);
      transition: all 0.3s;
    }
    .breaklogin:hover{
      text-indent:unset;
      color: rgb(174, 117, 192);
    }
  }
}
.z-1{
  height: 70px;
}
main{
  position: relative;
  overflow: hidden;
  .main{
    float: left;
    width: 60%;
    #content{
      width: 100%;
      //索引
      div.articlelist{
        h2{
          margin-top: 10px;
          margin-bottom: 10px;
        }
        hr{
          border-top: 1px solid rgb(175, 175, 175);
          margin-bottom: 10px;
        }
      }
      float: left;
      width: 100%;
      border: 5px solid @color-c;
      box-sizing: border-box;
      li.list{
        padding: 10px 10px 10px;
        border-radius: 5px;
        background-color: #ffffff;
        margin-bottom: 10px;
        h1.title{
          cursor: pointer;
          font-size: 24px;
          color: rgb(54, 54, 54);
          display: -webkit-box;
          -webkit-line-clamp: 1;
          white-space: pre-line;
          word-break: break-all;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
        h1.title:hover{
          text-indent: initial;
        }
        div.titles{
          text-indent: 1em;
          padding: 15px 0;
          color: rgb(131, 131, 131);
        }
        p{
          cursor:default;

          span{
            padding-right: 8px;
            font-size: 15px;
            color: rgb(119, 119, 119);
          }
          span:hover{
            color: rgb(168, 20, 236);
          }
          span:nth-of-type(6){
            font-size: 12px;
            border-radius: 30px;
            text-align: center;
            color: #fff;
            background-color: rgb(151, 151, 151);
            padding: 0 5px;
          }

          //作者
          span:nth-of-type(1){
            font-weight: 550;
            cursor: pointer;
            user-select: none;
          }
          //播放量
          span:nth-of-type(2){
  
          }
          //评论数
          span:nth-of-type(3){
            cursor:pointer;
            user-select: none;
          }
          //字数
          span:nth-of-type(4){
  
          }
          //时间
          span:nth-of-type(5){

          }
        }
      }
      //分页
      ul.limitlist{
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        li{
          height: 45px;
          width: 45px;
          font-size: 18px;
          font-weight: 550;
          line-height: 45px;
          text-align: center;
          margin:0 8px 8px 0;
          background-color: rgb(245, 245, 245);
          box-sizing: border-box;
          border: 1px solid rgb(129, 129, 129);;
          border-radius: 6px;
          cursor: pointer;
          transition: all 0.2s;
          user-select: none;
        }
        li:hover{
          border: 1px solid #00a1d6;
        }
      }
    }
  }
}
#r{
  float: left;
  top: 0;
  right: 0;
  width: 20%;
  box-sizing: border-box;
  .lzhanwei{
    height: 1px;
    width: 248px;
  }
  .top1{
    position: fixed;
    width: 248px;
    border: 5px solid @color-c;
    background-color: #f9f9f9;
    .switch{
      position: relative;
      height: 30px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      .position{
        position: absolute;
        height: 2px;
        width: 33%;
        background-color:rgb(142, 224, 9);
        top: 30px;
      }
      div{
        flex: 1;
        font-size: 20px;
        text-align: center;
        line-height: 28px;
        cursor: pointer;
      }
      .s1{
      }
      .s2{
      }
      .s3{
      }
    }
    .atk{
      height: 36px;
      display: flex;
      align-items: center;
    }
    .atk>span:nth-child(1){
      text-indent: 0.5em;
      width: 12%;
    }
    .atk>a:nth-child(2){
      word-break:break-all;  
      display: -webkit-box;
      -webkit-line-clamp:1;
      -webkit-box-orient:vertical;
      white-space: pre-line;
      height: 22px;
      overflow: hidden;
      width: 70%;
    }
    .atk>a:nth-child(2):hover{
      text-decoration:underline;
    }
    .atk>span:nth-child(3){
      text-indent: 0.7em;
      width: 18%;
    }
    .t1{
      color: rgb(196, 2, 255);
      font-weight: 700;
    }
    .t2{
      color: rgb(255, 158, 2);
      font-weight: 590;
    }
    .t3{
      color: rgb(236, 99, 81);
      font-weight: 500;
    }
    .t4{
      color: rgb(0, 0, 0);
    }
    .t5{
      color: rgb(0, 0, 0);
    }
  }
  nav.top2{
    position: fixed;
    width: 248px;
    transition: all 0.2s;
    margin-top: 290px;
    border: 5px solid @color-c;
    background-color: #f9f9f9;
    height: 300px;
    div:nth-of-type(1){
      padding: 10px 0;
      span:nth-of-type(1){
        margin-left: 10px;
      }
      hr{
        margin-top: 5px;
      }
    }
    .Alllabel{
      .listlabel{
        float: left;
        margin:10px 0 0 10px;
        border-radius: 30px;
        text-align: center;
        color: #fff;
        cursor: pointer;
        background-color: rgb(151, 151, 151);
        padding: 0 5px;
      }
    }
  }
}
#l{
  float: left;
  top: 0;
  left: 0;
  width: 20%;
  box-sizing: border-box;
  .lzhanwei{
    height: 1px;
    width: 248px;
  }
  //用户页面
  .user{
    position: fixed;
    height: 300px;
    width: 248px;
    box-sizing: border-box;
    border: 5px solid @color-c;
    background-color: #f9f9f9;

    //图片盒子
    .user-img{
      margin-top: 20px;
      position: relative;
      left: 50%;
      transform: translateX(-50%);
      height: 150px;
      width: 150px;
      border-radius: 50%;
      overflow: hidden;
      //图片幕布
      .userImg{
        user-select: none;
        cursor: pointer;
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 18px;
        color: rgba(255,255,255,0);
        background-color: rgba(80, 80, 80,0);
        z-index: 1;
        transition: all 0.3s;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
      .userImg:hover{
        color: rgba(255,255,255,1);
        background-color: rgba(80, 80, 80,.4);
      }
      //图片
      img{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        height: 150px;
      }
    }
    p{
      padding: 20px 0;
      font-size: 20px;
      text-align: center;
    }
    .webinfo{
      display: flex;
      justify-content: center;
      div{
        height: 50px;
        width: 50px;
        p:nth-of-type(1){
          padding: 3px 0;
        }
        p:nth-of-type(2){
          padding: 0;
          font-size: 12px;
          color: #999;
        }
      }
      div:nth-of-type(1){
        border-right: 1px solid #ccc;
      }
      div:nth-of-type(2){
        p:nth-of-type(1){
          margin-top: 5px;
          font-size: 14px;
          margin-bottom: 2px;
        }
        border-right: 1px solid #ccc;
      }
      div:hover{
        cursor: pointer;
        color:rgb(82, 209, 60)
      }
    }
  }
  ul.ul{
    background-color: #f9f9f9;
    margin-top: 300px;
    position: fixed;
    width: 238px;
    p{
      text-indent: 1em;
      font-size: 14px;
      padding: 10px 0;
      color: #888;
    }
    border: 5px solid @color-c;
    li{
      padding: 10px 20px;
      text-indent: 1em;
      font-size: 16px;color: #888;
      // transition: all 0.2s;
      span{
        margin-right: 10px;
        font-size: 18px;
      }
    }
    li:hover{
      background-color: #e4f1f5;
    }
  }
}
#mubu{
  position: fixed;
  z-index: 99999;
  height: 870px;
  width: 1920px;
  background-color: rgba(214, 214, 214,.5);
  .registry{
    height: 300px;
    width: 400px;
    background-color: #fff;
    border-radius: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%); 
    display: flex;
    flex-direction: column;
    justify-items: center;
    //提示
    .pppp{
      padding-top: 10px;
      text-align: center;
      color: #ffffff;
      transform: all 0.2s;
    }
    //昵称用户名密码通用样式
    div.input{
      display: flex;
      align-items: center;
      justify-content: center;
      width: 90%;
      transform: translateX(5%);
      border-bottom: 1px solid #e7e7e7;
      border-left: 1px solid #e7e7e7;
      border-right: 1px solid #e7e7e7;
      input{
        margin-left: 20px;
        width: 230px;
        box-sizing: border-box;
        background-color: rgba(78, 61, 61,0);
        border: 0;
        height: 36px;
        outline: none;
      }
    }
    div:nth-of-type(1){
      border-top: 1px solid #e7e7e7;
      border-radius: 8px 8px 0 0;
    }
    div:nth-of-type(2){
      border-top: 1px solid #e7e7e7;
      margin-top: 20px;
      border-radius: 8px 8px 0 0;
    }
    div:nth-of-type(3){
      border-radius: 0 0 8px 8px;
    }
    //登录注册按钮
    div:nth-of-type(4){
      position: absolute;
      bottom: 15%;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      justify-content: space-evenly;
      div{
        margin-top: 0;
        float: left;
        height: 30px;
        width: 170px;
        line-height: 30px;
        user-select: none;
        text-align: center;
        cursor: pointer;
        border-radius: 20px;
      }
      //登录-注册按钮
      div.registrybtn,div.loginbtn{
        border:1px solid #999;
      }
      //重置按钮
      div.chongzhi{
        margin-left: 18px;
        background-color: #00a1d6;
        color: #fff;
      }
      div.registrybtn:hover,div.loginbtn:hover{
        border:1px solid #00a1d6;
      }
      div.chongzhi:hover{
        background-color: #048bb8;
        color: #fff;
      }
    }
    //切换登录按钮
    .cheol{
      margin: 30px 0;
      display: flex;
      justify-content: space-evenly;
      .toLogin{
        position: relative;
        font-size: 20px;
        cursor: pointer;
      }
      .toRegistry{
        position: relative;
        font-size: 20px;
        cursor: pointer;
      }
    }
  }
}
//文件
#file{
  background-color: #fff;
  height: 0;
  width: 0;
}
//说说
#test{
  background-color: rgb(255, 255, 255);
  margin-top: 5px;
  border-radius: 15px;
  padding: 0 5px 3px 5px;
  h1{
    text-align: center;
  }
  p.p1{
    display: flex;
    justify-content: center;
    span{
      margin-left: 20px;
    }
    span:nth-of-type(7){
      margin-left: 5px;
    }
  }
}
.shuoshuo{
  .t1,.t2{
    font-size: 14px;
    input{
      height: 20px;
      font-size: 14px;
      border: 0;
      background: 0;
      outline: none;
    }
  }
  .t1{
    input{
      margin-top: 20px;
      width: 300px;
    }
  }
  .t2{
    input{
      width: 80px;
    }
  }
}

//站长标识
.right1{
  font-size: 14px;
  padding: 0px 8px;
  border-radius: 20px;
  line-height: 25px;
  font-weight: 600;
  color: #fff;
  width: 50px;
  background-color: #c402ff;
  margin-left: 5px;
}
.right2{
  font-size: 14px;
  padding: 0px 8px;
  border-radius: 20px;
  line-height: 25px;
  font-weight: 600;
  color: #fff;
  width: 50px;
  background-color: rgb(75, 230, 75);
  margin-left: 5px;
}
//关于页面
#about{
  width: 100%;
  padding: 1px 5px;
  border-radius: 10px;
  height: 534px;
  background-color: #fff;
  div.content{
    text-indent: 2em;
    font-size: 18px;
  }
  p:nth-of-type(1){
    margin-top: 5px;
  }
}
//留言页面
#comments{
  box-sizing: border-box;
  width: 100%;
  padding: 5px 6px;
  border-radius: 10px;
  background-color: #fff;
  .commentinput{
    textarea{
      color: #000;
      font-family: inherit;
      height: 200px;
      margin-top: 5px;
      font-size: 18px;
      padding: 3px;
      resize:none;
      outline: none;
      width: 98%;
      border:3px solid rgba(0,0,0,.2);
      border-radius: 3px;
    }
    .box{
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      align-content: center;
      box-sizing: border-box;
      .button{
        font-family: "Microsoft YaHei" ! important;
        font-size: 18px;
        font-weight: 500;
        background-color: rgb(255, 255, 255);
        border: 3px solid rgba(0,0,0,.2);
        user-select: none;
        color: #333;
        font-weight: 600;
        cursor: pointer;
        border-radius: 3px;
        padding: 1px 2px;
        line-height: 24px;
        text-align: center;
        width: 78px;
        margin-left:628px;
        transition: all 0.2s;
      }
      .commentcount{
        margin-bottom: 10px;
      }
    }
    .button:hover{
      background-color: rgb(0, 0, 0);
      border: 3px solid rgba(0,0,0,1);
      color:#fff;
    }
  }
  //留言样式
  ul.commentlist{
    li{
      font-family: "Open Sans","PingFang SC","Hiragino Sans GB","Microsoft Yahei","WenQuanYi Micro Hei","Segoe UI Emoji","Segoe UI Symbol",Helvetica,Arial,-apple-system,system-ui,sans-serif;
      .commentuser{
        display: flex;
        width: 99.2%;
        .commentuserimg{
          position: relative;
          height: 60px;
          width: 60px;
          background-repeat: no-repeat;
          background-size:60px auto;
          background-position: center center;
          border-radius: 50px;
          margin-right: 10px;
        }
        //用户名创建时间攒踩
        .contentuserinfo{
          .my{
            font-size: 12px;
            border-radius:30px;
            font-weight: 500;
            padding: 0 3px 0 4px;
            background-color: #24df34;
            text-align: center;
            color: #fff;
          }
          .username{
            font-weight: 600;
            font-size: 18px;
          }
          .usercreatedtime{
            font-size: 14px;
            color: #666;
          }
          .p1{
            .zanicon{
              cursor: pointer;
            }
            .zanicon:hover{
              color:  #bd6262;
            }
            .zan{
              font-size: 14px;
              margin-right: 10px;
            }
            .caiicon{
              cursor: pointer;
            }
            .caiicon:hover{
              color:  #bd6262;
            }
            .cai{
              font-size: 14px;
            }
          }
        }
      }
      .content{
        white-space:normal;
        word-break:break-all;
        word-wrap:break-word; 
        text-indent: 2em;
        margin-bottom: 8px;
      }
      hr{
        margin-bottom: 10px;
        width: 98.8%;
      }
    }
  }
}
//管理页面
.userlist{
  li{
    background-color: #fff;

    display: flex;
    align-items: center;
    margin: 10px 0;
    justify-content: space-evenly;
    height: 50px;
    width: 100%;
    span{
      margin: 0 20px;
      font-size: 20px;
      font-weight: 550;
    }
    .andmiUserName{
    }
    .andmiUserRight{
    }
    .andmiNickName{
    }
    .andmiUserRight{
    }
    .andmiUserBtn{
      float: right;
      height: 20px;
      width: 40px;
      margin-right: 10px;
    }
  }
}

html{
  overflow-y: scroll;
}
#scroll{
  position: fixed;
  margin-top: 290px;
  width: 229px;
  border: 5px solid @color-c;
  color: #fff;
  background-color: #f6e3e3;
  cursor: pointer;
  padding: 5px 10px;
}
#scroll:hover{

}

.top3{
  width: 248px;
  background-color: #f9f9f9;
  border: 5px solid @color-c;
  position: fixed;
  padding-bottom:5px;
  margin-top: 600px;
  h3{
    text-indent: 0.5em;
  }
  hr{
    margin-bottom: 5px;
  }
  p>a{
    margin: 10px 0;
    margin-left: 1em;
  }
}